import React from 'react';
import { Input, Select, Space, Button, Tooltip } from 'antd';
import { createStyles } from 'antd-style';
import { SendOutlined } from '@ant-design/icons';

const useStyles = createStyles(({ token }) => ({
  urlBar: {
    display: 'flex',
    alignItems: 'center',
    padding: '12px 16px',
    backgroundColor: token.colorBgContainer,
    borderRadius: token.borderRadius,
    boxShadow: `0 2px 8px ${token.colorBgElevated}`,
    transition: 'all 0.3s',
    '&:hover': {
      boxShadow: `0 4px 12px ${token.colorBgElevated}`,
    },
    marginBottom: '16px',
  },
  methodSelect: {
    width: '110px',
    '& .ant-select-selector': {
      fontWeight: 'bold',
    },
  },
  urlInput: {
    flex: 1,
    '&.ant-input': {
      fontSize: '14px',
    },
  },
  sendButton: {
    marginLeft: '12px',
    borderRadius: token.borderRadius,
    fontWeight: 'bold',
    transition: 'all 0.3s',
    '&:hover': {
      transform: 'translateY(-1px)',
      boxShadow: `0 2px 8px ${token.colorPrimaryBg}`,
    },
  },
  methodGet: { color: token.colorSuccess },
  methodPost: { color: token.colorInfo },
  methodPut: { color: token.colorWarning },
  methodDelete: { color: token.colorError },
  methodPatch: { color: token.colorPrimary },
}));

const httpMethods = [
  { value: 'GET', label: 'GET' },
  { value: 'POST', label: 'POST' },
  { value: 'PUT', label: 'PUT' },
  { value: 'DELETE', label: 'DELETE' },
  { value: 'PATCH', label: 'PATCH' },
];

interface UrlBarProps {
  method: string;
  url: string;
  onMethodChange: (method: string) => void;
  onUrlChange: (url: string) => void;
  onSend?: () => void;
}

const UrlBar: React.FC<UrlBarProps> = ({ method, url, onMethodChange, onUrlChange, onSend }) => {
  const { styles } = useStyles();

  // 根据HTTP方法获取对应的样式类名
  const getMethodStyleClass = (methodType: string) => {
    const methodLower = methodType.toLowerCase();
    switch (methodLower) {
      case 'get': return styles.methodGet;
      case 'post': return styles.methodPost;
      case 'put': return styles.methodPut;
      case 'delete': return styles.methodDelete;
      case 'patch': return styles.methodPatch;
      default: return '';
    }
  };

  // 处理回车键发送请求
  const handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {
    if (e.key === 'Enter' && onSend) {
      onSend();
    }
  };

  return (
    <div className={styles.urlBar}>
      <Space.Compact style={{ flex: 1 }}>
        <Select
          className={styles.methodSelect}
          value={method}
          onChange={onMethodChange}
          options={httpMethods.map(item => ({
            ...item,
            label: <span className={getMethodStyleClass(item.value)}>{item.label}</span>
          }))}
          dropdownMatchSelectWidth={false}
        />
        <Input
          className={styles.urlInput}
          value={url}
          onChange={(e) => onUrlChange(e.target.value)}
          placeholder="请输入请求URL"
          onKeyPress={handleKeyPress}
          allowClear
        />
      </Space.Compact>
      {onSend && (
        <Tooltip title="发送请求">
          <Button 
            type="primary" 
            icon={<SendOutlined />} 
            className={styles.sendButton}
            onClick={onSend}
          >
            发送
          </Button>
        </Tooltip>
      )}
    </div>
  );
};

export default UrlBar;